<template>
    <el-container class="container-fluid">
        <el-header class="border-bottom">
            <div class="container-xxl flex-v-center h-100">
                <div class="logo-container">TNX Admin</div>
                <el-menu class="flex-grow-1" :default-active="activePath" mode="horizontal" router>
                    <el-menu-item v-for="item in menuItems" :index="item.path">
                        <tnxel-icon :value="item.icon" v-if="item.icon"/>
                        <span class="ms-0">{{ item.caption }}</span>
                    </el-menu-item>
                </el-menu>
            </div>
        </el-header>
        <el-main class="container-xxl">
            <router-view></router-view>
        </el-main>
        <el-footer class="border-top text-secondary">
            <div class="container-xxl h-100 flex-v-center justify-content-between">
                <div>
                    <span class="text-secondary">Powered by Truenewx</span>
                </div>
                <div>
                    <span v-if="version">v{{ version }}</span>
                </div>
            </div>
        </el-footer>
    </el-container>
</template>

<script>
import tnx from '@/tnx.js';
import menuItems from './menu-items.js';

export default {
    data() {
        return {
            activePath: null,
            version: null,
        };
    },
    computed: {
        menuItems() {
            return menuItems;
        },
    },
    created() {
        tnx.app.rpc.loadConfig(import.meta.env.VITE_API_BASE_URL).then(context => {
            console.info(`${context.baseApp} initialized.`);
            tnx.app.rpc.get('/version').then(version => {
                this.version = version;
            });
        });
    },
    mounted() {
        this.$router.afterEach(to => {
            this.activePath = to.path;
        });
        let path = window.location.hash.substring(1);
        this.$router.push(path || '/');
    },
    methods: {},
};
</script>

<style lang="scss" scoped>
.el-container {
    min-height: 100%;
    padding: 0;

    .el-header, .el-footer {
        padding: 0;
    }

    .el-main {
        padding: 1rem 0;
        overflow-x: hidden;
    }

    .logo-container {
        height: 100%;
        padding-right: 1.5rem;
        display: flex;
        align-items: center;
    }

    .el-menu--horizontal {
        height: 100%;
        border-bottom: none;
    }
}
</style>